<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <h1></h1>
</body>
<script>

  //es6的语法   
  let obj = {
    username: "张三",
    age: 21
  }

  let h1 = document.querySelector("h1")
  h1.textContent = obj.username

  let newObj = new Proxy(obj, {
    get(obj, prop) {
      return obj[prop]
    },
    set(obj, prop, val) {
      //数据劫持
      h1.textContent = val
      obj[prop] = val
    },
    deleteProperty() {
      console.log("-----delete-----")
    },
    defineProperty() {
      console.log("-----define------")
    }
  })


  // console.log(newObj)                //查看数据结构
  // console.log(newObj.username);      //读操作

  // newObj.username = "李四"         //写操作
  // delete newObj.username              //删除操作
  // newObj.address = "北京海淀上庄白水洼"



</script>

</html>